<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <div id="root1"></div>
  <div id="root2"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<!-- 1. 引入类型限制js, 在react15版本以前，这个集成在react库当中，之后独立开来 -->
<script src="./prop-types.js"></script>

<script type="text/babel">
// 创建组件
class Person extends React.Component{
  // props 是只读的 不允许修改
  // this.props.name = "hello" // 这行代码会导致报错
  render(){
    const {name, sex, age} = this.props
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
        <li>年龄：{age + 1}</li>
      </ul>
    )
  }
}

// 2.propTypes 是固定写法, 类型限定，及必要性限制
Person.propTypes = {
  // name: React.PropTypes.string  // 15版本之前的写法
  name: PropTypes.string.isRequired,  // 名字是字符串且必传
  age: PropTypes.number,
  set: PropTypes.string,
  speak: PropTypes.func, // 限制为函数
}

// 3. 传默认值
Person.defaultProps = {
  sex: '不男不女',
  age: 18
}


ReactDOM.render(<Person name = "tom" age={18} speak={speak}/>, document.getElementById('root'))

// 数字型的传值
ReactDOM.render(<Person name = "jerry" age={19} sex="男"/>, document.getElementById('root1'))

// 语法糖的写法
const person = {name: 100, age: 40, sex: "男" }

// 对象拷贝
const person01 = {...person, name:"老黄"}

// 此处的 {...person}与结构赋值不是一个概念
ReactDOM.render(<Person {...person01} />, document.getElementById('root2'))

// 函数限制 演示函数
function speak() {
  console.log("我想说话！")
}
</script>
</html>
